<template>
  <!-- 菜单栏 -->
  <el-menu :default-active="$route.path" router class="el-menu-vertical-demo" text-color="#fff" @open="handleOpen"
    @close="handleClose" :collapse="isCollapse" active-text-color="#ffd04b" background-color="#304156">
    <el-menu-item :index="'/index/' + item.path" v-for="item in menu.slice(0, 1)" :key="item.path">
      <el-icon>
        <component :is="item.meta.icon" />
      </el-icon>
      <template #title>{{ $t(item.meta.title) }}</template>
    </el-menu-item>

    <el-sub-menu :index="item.path" v-for="item in menu.slice(1)" :key="item.name">
      <template #title>
        <el-icon>
          <component :is="item.meta.icon" />
        </el-icon>
        <span>{{ $t(item.meta.title) }}</span>
      </template>

      <el-menu-item-group v-for="item2 in item.children" :key="item2.name">
        <el-menu-item :index="'/index/' + item.path + '/' + item2.path" v-if="item2.meta.hidden!=false">{{
        $t(item2.meta.title)
        }}</el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>
  </el-menu>
</template>

<script setup lang="ts">
import { ref } from "vue";
import menu from "@/router/pages";

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
// 接收属性
// const props = defineProps(["isCollapse"]);
const props = defineProps({
  isCollapse: {
    type: Boolean,
    default: false
  }
})


</script>

<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
}

.el-menu {
  min-height: 100vh;
  background-color: #304156;
  color: #fff;
  border: 0;
  overflow: hidden;
}
</style>
